<template>
    <div class="">
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="id"
                    label="序号"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="read_time"
                    label="时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="is_read"
                    label="状态">
            </el-table-column>
        </el-table>

        <div>{{test}}</div>
    </div>
</template>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>

<script>
    import axios from "axios";
    export default {
        data() {
            return {
                tableData: [],
                list:[],
                test:""
            }

        },
        mounted(){
           this.init();

        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            init(){
                let _this = this;
                this.tableData = [];

                console.log(this.tableData)
                let url = 'http://web.ticai2.com/api/message/Message/getMessage';
                axios.post(url, {
                    uid: 16
                })
                    .then(function (response) {
                        if(response.status === 200){
                            if(response.data.code){
                                _this.tableData = response.data.data.data;
                            } else{
                                console.log(2)
                            }
                        }

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }

    }
</script>